<template>
     <div class="dashboard-container">
    <div class="app-container">
        <el-card shadow="never">
            <!-- 面包屑 -->
            <el-breadcrumb separator-class="el-icon-arrow-right" v-if="dirID.id">
                <el-breadcrumb-item>学科</el-breadcrumb-item>
                <el-breadcrumb-item>{{this.dirID.name}}</el-breadcrumb-item>
                <el-breadcrumb-item>目录</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 头部 -->
            <el-row justify="space-between" type="flex">
                <el-col >
                    <el-form :inline="true" :model="searchFormData" ref="searchForm">
                        <!-- 输入框 -->
                        <!-- prop是需要校验的字段名 -->
                        <el-form-item label="标签名称" prop="tagName">
                            <el-input size="small" style="width:190px" v-model="searchFormData.tagName"></el-input>
                        </el-form-item>
                        <!-- 下拉菜单 -->
                        <el-form-item label="状态" style="margin-left:26px" prop="state">
                            <el-select placeholder="请选择" size="small" style="width:205px" v-model="searchFormData.state">
                                <el-option v-for="item in status" :key="item.id" :value="item.id" :label="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 按钮 -->
                        <el-form-item>
                            <el-button size="small" @click="clear">清除</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="search">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="2">
                    <el-button v-if="dirID.id" type="text" icon="el-icon-back" @click="$router.back()" class="cancel">返回学科</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button type="success" icon="el-icon-edit" size="small" @click="hanldeAdd">新增标签</el-button>
                </el-col>
            </el-row>
            <!-- elert带有提示性的文字 -->
             <el-alert
                :title="`数据一共 ${totals} 条`"
                type="info"
                show-icon
                :closable="false"
                >
            </el-alert>
            <!-- 表格 -->
            <!-- :header-cell-style="{background:'#fafafa',color:'#606266'}"设置表格头部样式 -->
            <el-table  :data="tableData" style="width: 100%;margin-top:10px;border-bottom:5px;margin-bottom:20px" :header-cell-style="{background:'#fafafa',color:'#606266',borderBottom:'3px solid #e8e8e8'}"  v-loading="loading"  element-loading-text="拼命加载中">
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column prop="subjectName" label="所属学科" ></el-table-column >
                <el-table-column prop="tagName" label="标签名称"  ></el-table-column>
                <el-table-column prop="username" label="创建者" ></el-table-column>
                <el-table-column prop="addDate" label="创建日期">
                    <template #default="{row}">
                        {{row.addDate | parseTimeByString}}
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="状态" :formatter="formatState"></el-table-column>
                <el-table-column  label="操作" fixed="right" width="240px">
                    <template #default = {row}>
                        <el-button type="text"  @click="changeState(row.id,row.state)" size="small">
                            <span v-if="row.state===0">启用</span>
                            <span v-else>禁用</span>
                        </el-button>
                        <el-button  type="text" :disabled="row.state===1" @click="edit(row.id)" size="small">修改</el-button>
                        <el-button  type="text" :disabled="row.state===1" @click="del(row.id)" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row type="flex" justify="end">
                <el-pagination
                    background
                    :current-page="params.page"
                    :page-size="params.pagesize"
                    :page-sizes="[5,10,20,50]"
                    layout="prev, pager, next,sizes,jumper"
                    :total="totals"
                    @current-change="handleCurrentChange"
                    @size-change="changeSize">
                </el-pagination>
            </el-row>
        </el-card>

        <!-- 新增弹窗 -->
        <tagsAdd  :showDialog.sync = "showDialog" ref="tagsAdd" :dirID="dirID" :params.sync="params" :title="title"></tagsAdd>
    </div>
    </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/tags.js'
import State from '@/api/base/baseApi.js'
import tagsAdd from '../components/tags-add.vue'
export default {
  components: {
    tagsAdd
  },
  data () {
    return {
      tableData: [], // table数据
      status: State.status,
      showDialog: false,
      totals: 0,
      params: {
        page: 1, // 当前页
        pagesize: 10 // 每页显示条目个数
      },
      dirID: this.$route.query,
      loading: false,
      title: '',
      searchFormData: {
        page: 1, // 当前页
        pagesize: 10 // 每页显示条目个数,
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 请求标签列表
    async getList () {
      this.loading = true
      const { data } = await list({ ...this.params, subjectID: this.dirID.id })
      this.totals = data.counts
      this.tableData = data.items
      this.loading = false
    },
    // 将显示的数字状态变成文字
    formatState (row) {
      // row代表每一项数据
      const obj = this.status.find(item => Number(item.id) === Number(row.state))
      return obj?.value ? obj?.value : '未知'
    },
    // 修改状态
    async changeState (id, state) {
      try {
        // 先要修改state的状态,如果是0,改为1,然后作为changeState()的参数传入修改状态
        state = state ? 0 : 1
        //   请求接口
        await changeState(id, state)
        // 重新渲染页面数据
        this.getList()
        // 提示信息
        this.$message.success('状态修改成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 改变当前页
    handleCurrentChange (page) {
      // page当前点击的页数
      this.params.page = page
      this.getList()
    },
    // 改变当前页面条数
    changeSize (size) {
      // 当前页面显示的
      this.params.pagesize = size
      this.params.page = 1
      this.getList(this.params)
    },
    // 编辑
    async edit (id) {
      await this.$refs.tagsAdd.getDetail(id)
      this.showDialog = true
      this.title = '修改目录'
    },
    // 删除
    async del (id) {
      try {
        // 提示信息
        await this.$confirm('确定要删除么?')
        // 请求接口
        await remove(id)
        //   刷新页面
        // this.params.page = 1
        const totalPage = Math.ceil((this.totals - 1) / this.params.pagesize)
        this.params.page = this.params.page > totalPage ? totalPage : this.params.page
        this.params.page = this.params.page < 1 ? 1 : this.params.page
        if (this.params.page === 1) {
          this.params.page = 1
        }
        await this.getList()
        // 提示信息
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 搜索
    async search () {
      this.params.page = 1
      this.params = { ...this.params, ...this.searchFormData }
      this.getList()
    },
    // 清除
    async clear (id) {
      await this.$refs.searchForm.resetFields()
      this.params = remove(id)
      await this.getList()
    },
    // 点击新增
    hanldeAdd () {
      this.showDialog = true
      this.title = '新增目录'
    }

  }

}
</script>

<style scoped >
 .el-breadcrumb{
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8e8e8;
}
</style>
